<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="35%"
    top="10vh"
    :before-close="closeDialogHandle"
    :close-on-click-modal="false"
  >
    <el-form size="small" :model="gamePrize" :rules="gamePrizeRules" ref="gamePrizeForm" @keyup.enter.native="submitHandle" label-width="85px">
      <el-form-item label="奖品名称" prop="prizeName">
        <el-input v-model="gamePrize.prizeName" clearable placeholder="请输入奖品名称" class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="具体奖品" prop="prizeValue">
        <el-input v-model="gamePrize.prizeValue" clearable placeholder="请输入具体奖品" class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="奖品总数" prop="prizeTotalNum">
        <el-input v-model.number="gamePrize.prizeTotalNum" clearable placeholder="请输入奖品总数" class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="中将概率" prop="probability">
        <el-input v-model.number="gamePrize.probability" clearable placeholder="请输入中将概率" class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="排序等级" prop="sort">
        <el-input v-model.number="gamePrize.sort" clearable placeholder="请输入排序等级" class="width95percent"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          placeholder="请输入备注"
          v-model="gamePrize.remark"
          maxlength="250"
          show-word-limit
          resize="none"
          class="width95percent"
        />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="closeDialogHandle(false)">取 消</el-button>
      <el-button v-show="!optType" :disabled="buttonLoad" type="primary" @click="saveHandle">添 加</el-button>
      <el-button v-show="optType" :disabled="buttonLoad" type="primary"  @click="updateHandle">修 改</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        // 弹出框显示状态[true-显示 false-隐藏]
        visible: false,
        // 弹出框标题
        title: undefined,
        // 操作类型[true-修改 false-添加]
        optType: false,
        // 游戏奖品对象
        gamePrize: {
          // 奖品主键
          id: undefined,
          // 游戏id
          gameId: undefined,
          // 奖品名称
          prizeName: '',
          // 具体奖品
          prizeValue: '',
          // 奖品总数
          prizeTotalNum: '',
          // 中奖概率
          probability: '',
          // 排序等级
          sort: '',
          // 备注
          remark: '',
        },
        // 游戏奖品表单校验规则对象
        gamePrizeRules: {
          prizeName: [
            { required: true, message: '请输入奖品名称', trigger: 'blur' }
          ],
          prizeValue: [
            { required: true, message: '请输入具体奖品', trigger: 'blur' }
          ],
          prizeTotalNum: [
            { required: true, message: '请输入奖品总数', trigger: 'blur' },
            { type: 'number', message: '奖品总数必须为数字值'}
          ],
          probability: [
            { required: true, message: '请输入中奖概率', trigger: 'blur' },
            { type: 'number', message: '中奖概率必须为数字值'}
          ],
          sort: [
            { required: true, message: '请输入排序等级', trigger: 'blur' },
            { type: 'number', message: '排序等级必须为数字值'}
          ],
        },
        // 按钮禁用状态[true-禁用 false-可用]
        buttonLoad: false,
      }
    },
    methods: {
      /**
       * 初始化弹出框方法
       * @param {Object} gamePrize 游戏奖品对象
       * @param {string} gameId    游戏主键
       */
      initDialog(gamePrize, gameId) {
        // console.log('game', game);
        // 打开弹出框
        this.visible = true;

        let _gamePrize = this.gamePrize;
        _gamePrize.gameId = gameId;

        if (gamePrize) {
          this.title = '奖品修改';
          this.optType = true;

          this.$nextTick(() => {

            for (let propKey in _gamePrize) {
              if (gamePrize.hasOwnProperty(propKey)) {
                _gamePrize[propKey] = gamePrize[propKey];
              }
            }
          });
        } else {
          this.title = '添加奖品';
          this.optType = false;

          this.getNextSort(gameId);
        }
      },
      /**
       * 游戏奖品表单提交事件
       */
      submitHandle() {
        if (this.optType) {
          this.updateHandle();
        } else {
          this.saveHandle();
        }
      },
      /**
       * 游戏奖品添加事件
       */
      saveHandle() {
        // 按钮禁用
        this.buttonLoad = true;
        this.$refs.gamePrizeForm.validate()
          .then(() => {
            return this.$axios.$post('/game-prize/save', this.gamePrize);
          })
          .then(() => {
            this.notify('success', '操作成功', `保存${this.gamePrize.prizeName}奖品成功`);

            this.closeDialogHandle(true);
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可使用
            this.buttonLoad = false;
          });
      },
      /**
       * 游戏奖品修改事件
       */
      updateHandle() {
        // 按钮禁用
        this.buttonLoad = true;
        this.$refs.gamePrizeForm.validate()
          .then(() => {
            return this.$axios.$post('/game-prize/update', this.gamePrize);
          })
          .then(() => {
            this.notify('success', '操作成功', `${this.gamePrize.prizeName}奖品修改成功`);

            this.closeDialogHandle(true);
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可使用
            this.buttonLoad = false;
          });
      },
      /**
       * 获取游戏奖品下一个排序等级
       * @param {string} gameId 游戏主键
       */
      getNextSort(gameId) {
        this.$axios.$get('/game-prize/next/sort', { params: { gameId }})
          .then(({ data }) => {
            this.gamePrize.sort = data;
          })
          .catch(() => {});
      },
      /**
       * 关闭弹出框方法
       * @param {boolean | function} refresh 是否刷新父级组件数据
       */
      closeDialogHandle(refresh) {
        // 重置表单
        this.$refs.gamePrizeForm.resetFields();
        this.gamePrize.id = undefined;
        this.gamePrize.gameId = undefined;
        // console.log('gamePrize', JSON.stringify(this.gamePrize))

        if (typeof refresh === 'function') {
          refresh = false;
        }
        if (refresh) {
          // 向上传递事件
          this.$emit('refresh-table');
        }
        this.$nextTick(() => {
          // 关闭弹出框
          this.visible = false;
        });
      },
    }
  }
</script>

<style scoped>
  .width95percent {
    width: 95%;
  }
</style>
